<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐格式转换器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .main-container {
            padding: 2rem 0;
        }
        
        .card {
            border: none;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.95);
        }
        
        .upload-area {
            border: 3px dashed #667eea;
            border-radius: 15px;
            padding: 3rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            background: rgba(102, 126, 234, 0.05);
        }
        
        .upload-area:hover {
            border-color: #764ba2;
            background: rgba(118, 75, 162, 0.05);
            transform: translateY(-2px);
        }
        
        .upload-area.dragover {
            border-color: #28a745;
            background: rgba(40, 167, 69, 0.1);
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
            border-radius: 25px;
            padding: 12px 30px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }
        
        .feature-card {
            text-align: center;
            padding: 2rem;
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.9);
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            font-size: 3rem;
            color: #667eea;
            margin-bottom: 1rem;
        }
        
        .progress {
            height: 8px;
            border-radius: 10px;
            background: rgba(102, 126, 234, 0.1);
        }
        
        .progress-bar {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border-radius: 10px;
        }
        
        .file-info {
            background: rgba(102, 126, 234, 0.05);
            border-radius: 10px;
            padding: 1rem;
            margin: 1rem 0;
        }
        
        .supported-formats {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: center;
            margin: 1rem 0;
        }
        
        .format-badge {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        
        .file-list {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 10px;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.8);
        }
        
        .file-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem;
            border-bottom: 1px solid #eee;
            margin-bottom: 0.5rem;
        }
        
        .file-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }
        
        .file-name {
            flex: 1;
            margin-right: 1rem;
        }
        
        .file-status {
            font-size: 0.8rem;
            padding: 0.2rem 0.5rem;
            border-radius: 10px;
        }
        
        .status-pending {
            background: #fff3cd;
            color: #856404;
        }
        
        .status-converting {
            background: #d1ecf1;
            color: #0c5460;
        }
        
        .status-completed {
            background: #d4edda;
            color: #155724;
        }
        
        .status-error {
            background: #f8d7da;
            color: #721c24;
        }
    </style>
</head>
<body>
    <div class="container main-container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <!-- 标题 -->
                <div class="text-center mb-5">
                    <h1 class="display-4 text-white fw-bold mb-3">
                        <i class="fas fa-music me-3"></i>音乐格式转换器
                    </h1>
                    <p class="lead text-white-50">将您的音频文件转换为MP3格式，支持文件和文件夹批量转换</p>
                </div>

                <!-- 主卡片 -->
                <div class="card">
                    <div class="card-body p-5">
                        <!-- 上传区域 -->
                        <div class="upload-area" id="uploadArea">
                            <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
                            <h4 class="mb-3">拖拽文件或文件夹到此处或点击选择</h4>
                            <p class="text-muted mb-3">支持 m4a, wav, flac, aac, ogg, wma 格式</p>
                            <div class="mb-3">
                                <input type="file" id="fileInput" accept=".m4a,.wav,.flac,.aac,.ogg,.wma" style="display: none;" multiple>
                                <input type="file" id="folderInput" webkitdirectory directory style="display: none;">
                                <button class="btn btn-primary me-2" onclick="document.getElementById('fileInput').click()">
                                    <i class="fas fa-folder-open me-2"></i>选择文件
                                </button>
                                <button class="btn btn-outline-primary" onclick="document.getElementById('folderInput').click()">
                                    <i class="fas fa-folder me-2"></i>选择文件夹
                                </button>
                            </div>
                        </div>

                        <!-- 文件列表 -->
                        <div id="fileList" class="file-list" style="display: none;">
                            <h6><i class="fas fa-list me-2"></i>待转换文件列表</h6>
                            <div id="fileItems"></div>
                        </div>

                        <!-- 转换按钮 -->
                        <div class="text-center mt-4" id="convertButton" style="display: none;">
                            <button class="btn btn-primary btn-lg" onclick="convertFiles()">
                                <i class="fas fa-cog me-2"></i>开始批量转换
                            </button>
                        </div>

                        <!-- 转换进度 -->
                        <div id="progressSection" style="display: none;">
                            <div class="progress mb-3">
                                <div class="progress-bar" id="progressBar" role="progressbar" style="width: 0%"></div>
                            </div>
                            <p class="text-center text-muted" id="progressText">准备转换...</p>
                        </div>

                        <!-- 下载区域 -->
                        <div id="downloadSection" style="display: none;">
                            <div class="text-center">
                                <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                                <h5 class="text-success mb-3">转换完成！</h5>
                                <button class="btn btn-success btn-lg" id="downloadBtn">
                                    <i class="fas fa-download me-2"></i>下载所有文件
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 功能特性 -->
                <div class="row mt-5">
                    <div class="col-md-4">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <i class="fas fa-bolt"></i>
                            </div>
                            <h5>快速转换</h5>
                            <p class="text-muted">使用FFmpeg引擎，转换速度快，质量高</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <i class="fas fa-folder-tree"></i>
                            </div>
                            <h5>批量处理</h5>
                            <p class="text-muted">支持文件夹批量转换，自动保持目录结构</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <h5>安全可靠</h5>
                            <p class="text-muted">文件在服务器端处理，自动清理临时文件</p>
                        </div>
                    </div>
                </div>

                <!-- 支持的格式 -->
                <div class="card mt-4">
                    <div class="card-body text-center">
                        <h5 class="mb-3">支持的输入格式</h5>
                        <div class="supported-formats">
                            <span class="format-badge">M4A</span>
                            <span class="format-badge">WAV</span>
                            <span class="format-badge">FLAC</span>
                            <span class="format-badge">AAC</span>
                            <span class="format-badge">OGG</span>
                            <span class="format-badge">WMA</span>
                        </div>
                        <p class="text-muted mt-3">所有格式都将转换为高质量的MP3文件</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/app.js"></script>
</body>
</html> 